<script setup lang="ts">
import { useUserStore } from "@/store/useUserStore";
import { computed } from "vue";
import { useRouter, useRoute } from "vue-router";

const userStore = useUserStore();
const router = useRouter();
const route = useRoute();

const user = computed(() => userStore.user);
const storeName = computed(() => userStore.user?.dealerList[0]?.shopName || "");

const handleNavigate = (name: string) => {
  router.push({
    name,
    query: {
      ...route.query
    }
  });
};
</script>

<template>
  <div class="min-h-screen bg-gradient-to-b from-blue-50 to-white px-4 py-6">
    <!-- Header with User Profile -->
    <div class="bg-white rounded-2xl p-5 shadow-lg mb-6">
      <div class="flex items-center space-x-4">
        <van-image
          :src="user?.headImage || '/default-avatar.png'"
          class="w-16 h-16 rounded-xl shadow-md transform hover:scale-105 transition-transform duration-300"
          fit="cover"
        />
        <div class="flex-1">
          <div class="text-xl font-bold text-gray-800 mb-1">
            {{ user?.wechatName || "神经蛙" }}
          </div>
          <div
            class="text-blue-500 bg-blue-50 inline-block px-3 py-1 rounded-full text-sm"
          >
            ID: {{ user?.buyerUserId || "31785823" }}
          </div>
        </div>
      </div>
    </div>

    <!-- Store Info Card -->
    <div class="bg-white rounded-2xl p-5 shadow-lg mb-6">
      <div class="text-gray-500 text-sm mb-2">总店名称</div>
      <div class="text-lg font-semibold text-gray-800">{{ storeName }}</div>
    </div>

    <!-- Navigation Section -->
    <div class="space-y-4">
      <div class="text-gray-500 text-sm mb-2 px-2">快捷导航</div>
      <div class="grid grid-cols-2 gap-4">
        <!-- Course Card -->
        <div
          class="bg-white rounded-2xl p-5 shadow-lg cursor-pointer transform hover:scale-105 transition-all duration-300"
          @click="handleNavigate('CourseList')"
        >
          <div class="flex flex-col items-center">
            <div
              class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-3"
            >
              <i class="text-blue-500 text-xl">📚</i>
            </div>
            <span class="text-gray-800 font-medium">课题</span>
          </div>
        </div>

        <!-- Live Card -->
        <div
          class="bg-white rounded-2xl p-5 shadow-lg cursor-pointer transform hover:scale-105 transition-all duration-300"
          @click="handleNavigate('TrainList')"
        >
          <div class="flex flex-col items-center">
            <div
              class="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center mb-3"
            >
              <i class="text-red-500 text-xl">📹</i>
            </div>
            <span class="text-gray-800 font-medium">训练营</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.from-blue-50 {
  --tw-gradient-from: #eff6ff;
  --tw-gradient-to: #ffffff;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* 添加阴影过渡效果 */
.shadow-lg {
  transition: box-shadow 0.3s ease;
}

.shadow-lg:hover {
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 添加平滑过渡效果 */
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
</style>
